<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>社员男女比例图</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="memberGenderRef" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>社员分布图</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="memberDistributeRef" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>社员发展</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="memberChangeRef" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>赞助分析</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="sponsorShipRef" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import {
  getMemberGenderAnalyseResult,
  getMemberDistributeResult,
  getMemberChangeResult,
  sponsorShipDistributeResult,
} from "@/api/system/analyse";
export default {
  data() {
    return {
      // 男女比例数据
      memberGender: [],
      // 男女比例饼状图
      memberGenderRef: null,
      memberDistribute: [],
      memberDistributeRef: null,
      memberChangeNameList: [],
      memberChangeValueList: [],
      memberChangeRef: null,
      sponsorShipNameList: [],
      sponsorShipValueList: [],
      sponsorShipRef: null,
    };
  },
  methods: {
    // 获取男女比例
    getMemberGenderList() {
      getMemberGenderAnalyseResult().then((res) => {
        this.memberGender = res.data;
        this.loadMemberGenderChart();
      });
    },
    //渲染男女比例饼状图
    loadMemberGenderChart() {
      this.memberGenderRef = echarts.init(
        this.$refs.memberGenderRef,
        "macarons"
      );
      this.memberGenderRef.setOption({
        title: {
          text: "社团男女比例饼状图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "社团男女比例饼状图",
            type: "pie",
            data: this.memberGender,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    getMemberDistributeList() {
      getMemberDistributeResult().then((res) => {
        this.memberDistribute = res.data;
        this.loadMemberDistributeChart();
      });
    },
    loadMemberDistributeChart() {
      this.memberDistributeRef = echarts.init(
        this.$refs.memberDistributeRef,
        "macarons"
      );
      this.memberDistributeRef.setOption({
        title: {
          text: "社团成员分布饼状图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "社团成员分布饼状图",
            type: "pie",
            data: this.memberDistribute,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    getMemberChange() {
      getMemberChangeResult().then((res) => {
        this.memberChangeNameList = res.data.nameList;
        this.memberChangeValueList = res.data.valueList;
        this.loadMemberChangrChart();
      });
    },
    loadMemberChangrChart() {
      this.memberChangeRef = echarts.init(
        this.$refs.memberChangeRef,
        "macarons"
      );
      this.memberChangeRef.setOption({
        xAxis: {
          type: "category",
          data: this.memberChangeNameList,
          name: "年份",
        },
        yAxis: {
          type: "value",
          name: "人数",
        },
        series: [
          {
            data: this.memberChangeValueList,
            type: "line",
          },
        ],
      });
    },
    getSponsorShip() {
      sponsorShipDistributeResult().then((res) => {
          this.sponsorShipNameList = res.data.nameList;
          this.sponsorShipValueList = res.data.valueList;
          this.loadSponsorShipChart()
      });
    },
    loadSponsorShipChart() {
      this.sponsorShipRef = echarts.init(this.$refs.sponsorShipRef, "macarons");
      this.sponsorShipRef.setOption({
        xAxis: {
          type: "category",
          data: this.sponsorShipNameList,
        },
        yAxis: {
          type: "value",
          name: "金额(元)"
        },
        series: [
          {
            data: this.sponsorShipValueList,
            type: "bar",
          },
        ],
      });
    },
  },
  created() {
    this.getMemberGenderList();
    this.getMemberDistributeList();
    this.getMemberChange();
    this.getSponsorShip();
  },
  mounted() {},
};
</script>

<style>
</style>